<template>
	<view class="container">
		<view class="header">
			<text class="title">Demo 1: 基础与触底加载</text>
			<text class="scroll-info">当前滚动位置: {{ currentScrollTop.toFixed(0) }}px</text>
			<button size="mini" @click="goTop">点我返回顶部</button>
		</view>

		<!-- 
			scroll-y: 开启纵向滚动
			:scroll-top: 动态绑定滚动条位置，用于程序化控制
			:scroll-with-animation: 使 scroll-top 的改变产生动画效果
			@scroll: 监听滚动事件，实时获取滚动信息
			@scrolltolower: 滚动到底部时触发
			lower-threshold: 距离底部20px时就触发 scrolltolower
		-->
		<scroll-view class="list-scroll" scroll-y :scroll-top="scrollTopValue" scroll-with-animation @scroll="onScroll"
			@scrolltolower="loadMore" :lower-threshold="20">
			<!-- 列表内容 -->
			<view v-for="(item, index) in dataList" :key="index" class="list-item">
				<text>第 {{ item }} 项数据</text>
			</view>

			<!-- 加载状态提示 -->l
			<view class="loading-status">
				<text v-if="loadingStatus === 'loading'">努力加载中...</text>
				<text v-if="loadingStatus === 'no-more'">--- 我是有底线的 ---</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [], // 列表数据
				page: 1, // 当前页码
				loadingStatus: 'loading', // 加载状态：'loading', 'no-more'
				scrollTopValue: 0, // 控制滚动条位置，0表示顶部
				currentScrollTop: 0 // 用于显示当前滚动位置
			}
		},
		onLoad() {
			// 页面加载时，获取初始数据
			this.fetchData();
		},
		methods: {
			// 模拟从服务器获取数据
			fetchData() {
				this.loadingStatus = 'loading';
				console.log(`正在请求第 ${this.page} 页数据...`);

				// 模拟网络请求
				setTimeout(() => {
					const newItems = [];
					for (let i = 0; i < 20; i++) {
						newItems.push((this.page - 1) * 20 + i + 1);
					}

					this.dataList = [...this.dataList, ...newItems];

					// 模拟数据加载完毕的情况
					if (this.page >= 5) {
						this.loadingStatus = 'no-more';
					} else {
						this.loadingStatus = ''; // 重置状态，准备下一次加载
					}

					console.log('数据加载完成！');
				}, 1000); // 模拟1秒延迟
			},

			/**
			 * @scrolltolower 事件触发的方法
			 * 滚动到底部时调用
			 */
			loadMore() {
				// 如果当前已经是'no-more'状态，或者正在加载中，则不执行任何操作
				if (this.loadingStatus === 'no-more' || this.loadingStatus === 'loading') {
					console.log('已无更多数据或正在加载，跳过本次请求。');
					return;
				}
				this.page++;
				this.fetchData();
			},

			/**
			 * @scroll 事件触发的方法
			 * 滚动过程中实时触发
			 */
			onScroll(event) {
				// event.detail 包含了滚动的所有信息 {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
				// console.log(event.detail);
				this.currentScrollTop = event.detail.scrollTop;
			},

			/**
			 * 返回顶部
			 */
			goTop() {
				// scroll-top 的一个技巧：如果连续设置相同的值，第二次不会生效。
				// 所以我们先设置为一个很小但不同的值，再在下一次渲染后设置为0.
				this.scrollTopValue = 0.1;
				this.$nextTick(() => {
					this.scrollTopValue = 0;
				});
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header {
		padding: 20rpx;
		border-bottom: 1rpx solid #eee;
		background-color: #f8f8f8;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.scroll-info {
		font-size: 24rpx;
		color: #666;
		margin-left: 20rpx;
	}

	.list-scroll {
		/* 这是关键！必须给 scroll-view 一个固定的高度 */
		flex: 1;
		height: 0;
		/* flex:1 和 height:0 是一个经典的组合，让元素撑满剩余空间 */
		box-sizing: border-box;
	}

	.list-item {
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background-color: #fff;
	}

	.loading-status {
		padding: 20rpx;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}
</style>